*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
body{
    background-color: #ccc;
}
.mofang{
    position: relative;
    width: 200px;
    height: 200px;
    // border: 1px solid #000;
    margin: 200px auto;
    // perspective: 1000px;
    transform-style:preserve-3d ;
     transition: all 2s;
     transform: rotateX(60deg) rotateY(40deg);

    &:hover .left {
     transform: rotateX(90deg) translateZ(-150px);
     transition: all 2s;
       
    }
     &:hover .right {
     transform: rotateX(90deg) translateZ(150px);
     transition: all 2s;
       
    }
     &:hover .bottom {
     transform: rotateY(90deg) translateZ(150px);
     transition: all 2s;
       
    }
     &:hover .top {
     transform: rotateY(90deg) translateZ(-150px);
     transition: all 2s;
       
    }
     &:hover .hou {
     transform:  translateZ(-150px);
     transition: all 2s;
       
    }
     &:hover .qian {
     transform:  translateZ(150px);
     transition: all 2s;
       
    }
    
    .gongtong{
        position: absolute;
        top: 0;
        
        width: 200px;
        height: 200px;
    }
    .left{
        background-color: transparent;
        transform: rotateX(90deg) translateZ(100px);
        ul{
            height:  100%;
            display: flex;
            flex-wrap: wrap;
            li{
                width: 30%;
                height: 30%;
                background-color: #fff;
                margin: 3px 3px;
                line-height: 65px;
                text-align: center;
                border-radius: 10px;
            }
        }
        
    }
    
    .right{
        background-color: transparent;
        transform: rotateX(90deg) translateZ(-100px);
        transition: all 1s;
        ul{
             height: 100%;
             display: flex;
            flex-wrap: wrap;
            li{
                width: 30%;
                height: 30%;
                background-color: green;
                margin: 3px 3px;
                line-height: 65px;
                text-align: center;
                border-radius: 10px;

            }
        }
       
    }
    .top{
        background-color:transparent;
        transform: rotateY(90deg) translateZ(100px);
        ul{
             height: 100%;
             display: flex;
            flex-wrap: wrap;
            li{
                width: 30%;
                height: 30%;
                background-color: red;
                margin: 3px 3px;
                line-height: 65px;
                text-align: center;
                border-radius: 10px;

            }
        }

    }
    .bottom{
        background-color: transparent;
        transform: rotateY(90deg) translateZ(-100px);
        ul{
             height: 100%;
             display: flex;
            flex-wrap: wrap;
            li{
                width: 30%;
                height: 30%;
                background-color: purple;
                margin: 3px 3px;
                line-height: 65px;
                text-align: center;
                border-radius: 10px;

            }
        }
    }
    .qian{
        background-color: transparent;
        transform: translateZ(-100px);
        ul{
             height: 100%;
             display: flex;
            flex-wrap: wrap;
            li{
                width: 30%;
                height: 30%;
                background-color: blue;
                margin: 3px 3px;
                line-height: 65px;
                text-align: center;
                border-radius: 10px;

            }
        }
    }
    .hou{       
        background-color: transparent; 
        transform: translateZ(100px);
        
         ul{
             height: 100%;
             display: flex;
            flex-wrap: wrap;
            li{
                width: 30%;
                height: 30%;
                background-color:orange;
                margin: 3px 3px;
                line-height: 65px;
                text-align: center;
                border-radius: 10px;
            }
        }
   }
}